<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<style>
		table
		{
			border: solid thin #000000;
			border-collapse: collapse;
			margin: 10px;;
		}
	</style>
	<title>使用clone方式添加元素的示例</title>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<table border="1">
	<thead><tr><th>Multiply</th><th>Result</th></tr></thead>
	<tbody id="fruitsBody">
	<tr><td class="sum">1 * 1</td><td class="result">1</td> </tr>
	</tbody>
</table>
<button id="clone">Clone & Add</button>
<!-- JavaScript脚本链接请在此处插入 -->
<script>
	var tableBody = document.getElementById('fruitsBody');

	document.getElementById('clone').onclick = function(){
		var count = tableBody.getElementsByTagName('tr').length + 1;
		var newElement = tableBody.getElementsByTagName('tr')[0].cloneNode(true);
		newElement.getElementsByClassName('sum')[0].firstChild.data = count + ' * ' + count;
		newElement.getElementsByClassName('result')[0].firstChild.data = count * count;

		tableBody.appendChild(newElement);
	};
</script>
</body>
</html>